#filemanager {
	font-size: 16px;
	.modal-lg {
		width: 1400px;
		max-width: 80%;
	}
	.modal-header {
		background-color: $color-1;
		display: flex;
		align-items: center;
		h4 {
			margin-right: 1em;
		}
		.nav-tabs {
			margin-bottom: 0;
		}
		.close {
			margin-left: auto;
		}
	}

	.modal-body {
		background-color: $color-1;
		height: 100vh;
		max-height: 700px;
		max-width: 100%;

		#tab-upload .queue { height: 450px; }

		.loading {
			color: #b0b0b0;
			margin: 50px 0;
		}

		.filemanager-list {
			display: flex;
			flex-wrap: wrap;
			height: 100vh;
			max-height: 700px;
			overflow-y: scroll;

			a {
				color: #000000;
				border: 1px solid #eaeaea;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 150px;
				height: 150px;
				margin: 10px;
				position: relative;

				img {
					max-width: 100%;
					max-height: 100%;
					margin: auto;
				}

				span {
					background-color: rgba(245, 245, 245, 0.85);
					position: absolute;
					bottom: 0;
					width: 100%;
					font-size: 12px;
					text-align: center;
					word-wrap: break-word;
					padding: 5px 10px;
				}

				&.is-active {
					&:before {
						content: '';
						background-color: rgba(0, 0, 0, 0.5);
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}

					&:after {
						content: "\f00c";
						color: #ffffff;
						font: 700 normal normal 50px/1 "Font Awesome 5 Free";
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}

		#sidebar-content {
			background-color: darken($color-1, 5);
			border-left: 1px solid darken($color-1, 10);
			padding: 15px;
			overflow-y: scroll;
			z-index: 10;
		}
	}
	.modal-header {
		background-color: $color-1;
	}
}
